<script setup>
import {} from 'vue'
const prop = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['changeDone'])
const changeFn = (id) => {
  emit('changeDone', id)
}

const finshAll = () => {
  prop.list = prop.list.filter((item) => item.done === true)
  console.log(prop.list)
}
</script>

<template>
  <div>
    <ul class="todo-list">
      <li :class="{ completed: item.done }" v-for="item in list" :key="item.id">
        <div class="view">
          <input
            class="toggle"
            type="checkbox"
            :checked="item.done"
            @change="changeFn(item.id)"
          />
          <label>{{ item.name }}</label>
          <button class="destroy" @click="emit('delTodo', item.id)">
            删除按钮
          </button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
    </ul>

    <ul class="filters" style="display: flex">
      <li style="margin-right: 25px">
        <a href="#/" class="selected">所有</a>
      </li>
      <li style="margin-right: 25px">
        <a href="#/" class="selected">未完成</a>
      </li>
      <li style="margin-right: 25px">
        <a href="#/" class="selected" @click="finshAll">完成</a>
      </li>
    </ul>
  </div>
</template>
